<template>
  <el-dialog v-model="visibleCurrent" @close="dialogClose" title="审批进度" width="60%" append-to-body>
    <DetailForm :dataSources="approvalHistoryData" :columns="approvalHistoryColumns" />
    <el-form ref="addFormRef" class="custom-form" :model="approvalHistoryData" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="附件信息">
            <el-button type="primary" link>test.png</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="附件信息">
            <el-table :data="approvalHistoryProgressList">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column label="处理人" prop="assigneeName" min-width="130" align="center"
                :show-overflow-tooltip="true" />
              <el-table-column label="处理时间" prop="endDate" min-width="150" align="center"
                :show-overflow-tooltip="true" />
              <el-table-column label="处理结果" prop="approveOperateText" min-width="100" align="center"
                :show-overflow-tooltip="true" />
              <el-table-column label="处理意见" prop="comment" min-width="200" align="center"
                :show-overflow-tooltip="true" />
              <el-table-column label="处理状态" prop="taskStatus" min-width="100" align="center"
                :show-overflow-tooltip="true" />
              <el-table-column label="审批附件" min-width="120" align="center">
                <template #default="{ row, $index }">
                  <el-button type="primary" link v-for="(item, index) in row.taskFile"
                    :key="$index + '.' + index + '.taskFile'">{{ item.name }}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="上传附件" min-width="120" align="center">
                <template #default="{ row, $index }">
                  <el-button type="primary" link v-for="(item, index) in row.uploadFile"
                    :key="$index + '.' + index + '.uploadFile'">{{ item.name }}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="会审意见" min-width="120" align="center">
                <template #default>
                  <el-button type="primary" link>查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup>
const emits = defineEmits(['update:visible']);
const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  }
});
const visibleCurrent = ref(false)
watch(() => props.value, (newValue) => {
  visibleCurrent.value = newValue
});
const approvalHistoryColumns = [
  { label: "申请类型", column: "createType", span: 8 },
  { label: "提出人", column: "createName", span: 8 },
  { label: "提出时间", column: "updateTime", span: 8 },
  { label: "提出时间", column: "remark", span: 24 },
]
const approvalHistoryData = reactive({
  createType: "新建商机申请",
  createName: "张三",
  updateTime: "2023-12-29 15:35:16",
  remark: "测试",
})
const approvalHistoryProgressList = ref([
  {
    taskName: '申请人提交',
    assigneeName: '王丽丽',
    endDate: '2024-06-12 10:26:00',
    approveOperateText: '通过',
    comment: '--',
    taskStatus: '已处理',
    taskFile: [{name: 'test.png'}],
    uploadFile: [{name: 'test.png'}],
    reviewOpinion: ''
  },
  {
    taskName: '审批人提交',
    assigneeName: '王丽丽',
    endDate: '2024-06-12 10:26:00',
    approveOperateText: '通过',
    comment: '我同意这个申请',
    taskStatus: '已处理',
    taskFile: [{name: 'test.png'}],
    uploadFile: [{name: 'test.png'}],
    reviewOpinion: ''
  }
])
const dialogClose = () => {
  emits("update:visible", false);
}
</script>

<style></style>